<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>转让记录</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css" />
    <style>
        .body {
            padding: 0 3%;
        }

        .login-header {
            color: rgba(0, 0, 0, .85) !important;
            padding: 2% 0;
            text-align: center;
        }

        .layui-text em,
        .layui-word-aux {
            color: #ef0909 !important;
            padding: 0 5px !important;
        }

        .layui-input-block {
            margin-left: 0;
            min-height: 46px;
        }

        p {
            font-size: 20px;
        }

        .imgbox {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .imgbox img {
            width: 30%;
            height: 30%;
        }

        .tabs {
            display: flex;
            flex-direction: column;
        }

        .tab-nav {
            list-style-type: none;
            padding: 0;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-evenly;
            font-size: 20px;
        }

        .tab-nav li {
            width: 140px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tab-nav a {
            text-decoration: none;
            color: black;
        }

        .tab {
            display: none;
            padding: 20px;
        }

        .active {
            display: block;
        }

        .container {
            width: 100%;
            /* background-color: rgb(238, 238, 238); */
            height: auto;
            padding: 2rem;
            box-sizing: border-box;
            font-size: 15px;
            margin-bottom: 20px;
			border: 1px solid lightgrey;
			border-radius: 1%;
        }

        .firstfloor {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .tagbox {
            height: 20px;
            background-color: #26B2AE;
			padding: 2px 10px 2px 10px;
			border-radius: 5%;
            text-align: center;
        }

        .secondfloor {
            widows: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .active-tab {
			
            color: #009688 !important; /* 或者你想要的任何颜色 */
		

        }
        @media screen and (min-width: 800px) {
			.layui-form-label{
				width: 86px !important;
			}	
		}
		.content_box{
			max-width: 960px;
		}
		.state{
			color: rgba(236, 114, 13, 0.801);
		}
    </style>
</head>

<body>
    <div class="body">
        <div class="login-header">
            <h2 style="font-weight: 400;letter-spacing: 3px; font-size: 30px">转让记录</h2>
        </div>
        <div class="layui-fluid content_box">
            <div class="layui-tab layui-tab-brief ">
                <ul class="tab-nav">
                    <li><a href="#" data-tab-state="1" class="tab-link active-tab">全部</a></li>
                    <li><a href="#" data-tab-state="2" class="tab-link">我申请的</a></li>
                    <li><a href="#" data-tab-state="3" class="tab-link">我待批的</a></li>
                </ul>
                <div class="tab-content" id="tab1">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="assets/js/config.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

    <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

    <script id="TPL" type="text/html">
        <div class="container"  onclick="goDetail('{{d.id}}')">
            <div style="margin-bottom: 10px;" class="firstfloor">
                <div style="margin-right: 10px;" class="tagbox">
                    <span>{{d.knowledge_type_detail}}</span>
                </div>
                <div style="margin-right: 10px;" class="">
                    <span>{{=d.name}}</span>
                </div>
                <div class="">
                    <span>{{d.knowledge_num}}</span>
                </div>
            </div>
            <div style="margin-bottom: 10px;" class="secondfloor">
                <span>所有权人：{{d.ownership}}</span>
                <span style="color: #26B2AE;">{{d.contract_type_info}}</span>
            </div>
            <div style="margin-bottom: 10px;"><span>二级单位：{{d.second_company}}</span></div>
            <div style="margin-bottom: 10px;"><span>主完成人：{{d.main_finished_person_name}}</span></div>
            <div style="margin-bottom: 10px;"><span>有效期限：{{d.knowledge_start_time}}{{d.knowledge_end_time}}</span></div>
            <div style="margin-bottom: 10px;"><span>受让：{{d.to_company_name}}</span></div>
            <div style="margin-bottom: 10px;" class="secondfloor">
                <span>收益：{{d.conversion_type}}{{d.conversion_get_money}}</span>
                <span class="state">{{d.statetitle}}</span>
            </div>
            <div style="margin-bottom: 10px;"><span>{{d.add_datetime}}</span></div>
        </div>

    </script>

    <script>

        layui.config({
            base: 'assets/module/'
        }).use(['layer', 'form', 'upload', 'laytpl'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            var router = layui.router();
            var laytpl = layui.laytpl;

            $(document).ready(function () {
                let userMsg = JSON.parse(localStorage.getItem("userMsg"));
                loadTabData(1);
                // 给所有的Tab链接添加点击事件
                $('.tab-link').on('click', function (e) {
                    e.preventDefault(); // 阻止默认行为
                    var tabState = $(this).data('tab-state'); // 获取当前点击Tab的状态值
                    // 移除所有Tab链接的active-class
                    $('.tab-link').removeClass('active-tab');
                    // 添加当前点击Tab的active-class
                    $(this).addClass('active-tab');
                    loadTabData(tabState, function () {
                        // 清空#tab1的内容
                        $('.tab-content').empty();
                        // ...
                    });
                });
                function loadTabData(state, callback) {
                    $.ajax({
                        url: serverUrl + 'Knowledge/getList.html',
                        type: 'POST',
                        data: {
                            user_id:userMsg.UserId,
                            tabState: state, // 动态改变tabState的值
                            endTime: "", // 这里填写endTime的实际值
                            knowledgeType: "", // 这里填写knowledgeType的实际值
                            knowledgeTypeDetail: "", // 这里填写knowledgeTypeDetail的实际值
                            ownershipVal: "", // 这里填写ownershipVal的实际值
                            page: 1, // 这里填写page的实际值
                            searchName: "", // 这里填写searchName的实际值
                            startTime: "", // 这里填写startTime的实际值
                            statusVal: "", // 这里填写statusVal的实际值
                        },
                        success: function (data) {
                            updatePageContent(data, state); // 假设这是个函数，用于更新页面内容
                            if (typeof callback === 'function') {
                                callback();
                            }
                        },
                        error: function (err) {
                            console.log(err);
                        },
                        contentType: 'application/x-www-form-urlencoded',
                        dataType: 'json'
                    });
                }

                // 示例函数，用于根据新数据更新页面内   容
                function updatePageContent(data) {
                    // 这里根据数据更新页面，类似于之前提供的动态生成内容的逻辑
                    // var dataArry = JSON.parse(data);
                    const dataList = data.obj.data;
                    console.log(dataList, '111111111111111111111111');
                
                    // 遍历数据并生成内容
                    dataList.forEach(function (item) {
                        var stateTile = '' ;
                        switch (item.state) {
                                case 2:stateTile='待二级单位审批';break;
                                case 1:stateTile='待上传审批表盖章后附件';break;
                                case 3:stateTile='待选金额审批人';break;                               
                                case 4:stateTile='待金额审批';break;
                                case 5:stateTile='待交易公示';break;                                
                                case 6:stateTile='待评估';break;
                                case 7:stateTile='待签订合同';break;                                
                                case 8:stateTile='已完成';break;                                
                        }
                        item.statetitle = stateTile;
                        
                        var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
                        var elemView = document.getElementById('view'); // 视图对象
                        // 渲染并输出结果
                        laytpl(getTpl).render(item, function(str){
                            setTimeout(function(){
                                $('.tab-content').append(str);
                            }, 200);
                            
                        });   
                    });
                }
            });
        });

        function goDetail(id){
            window.location.href = `detail.html?id=`+id;
        }

    </script>
</body>

</html>